<template>
  <div>
    <ul v-for="item in list">
      <li>姓名:{{ item.name }}</li>
      <li>年龄:{{ item.age}}</li>
    </ul>
  </div>

  <div>
    <table border="1">
      <tr bgcolor="cyan">
        <td>用户借款编号</td>
        <td>借款用户账号</td>
        <td>借款款项名称</td>
        <td>借款金额</td>
        <td>剩余还款金额</td>
      </tr>

      <tr v-for="item in logn">
        <td>{{ item.id }}</td>
        <td>{{ item.useName }}</td>
        <td>{{ item.lognName }}</td>
        <td>{{ item.borrowMoney }}</td>
        <td>{{ item.backMoney }}</td>
      </tr>
    </table>
  </div>

  <div>
    <h1>双向数据绑定演示</h1>
    <input type="text" v-model="msg">
    <p>{{ msg }}</p>
  </div>
</template>

<script setup lang="ts">

//引入
import {reactive,toRefs,ref} from 'vue'

//数据
let data = reactive({
  list:[{
  name:'张大',
  age:21
},
{
  name:'李尔',
  age:20
},
{
  name:'刘珊',
  age:22
},
{
  name:'钱嗣',
  age:25
},
{
  name:'赵武',
  age:24
}],
 logn:[{
  id:1,
  useName:'zhangsan',
  lognName:'八维助学金',
  borrowMoney:400,
  backMoney:0
},{
  id:2,
  useName:'zhangsan',
  lognName:'八维助学金',
  borrowMoney:10000,
  backMoney:10000
}],
msg:'hello world'
})

//解构
let {list,logn,msg} = toRefs(data)

</script>

<style scoped>

/* 改变样式 */
ul{
  list-style: none;
}

div{
  margin-top: 50px;
}

</style>